<template>
    <div class="register-page">
        <div class="register-box" align="center">
            <div style="margin-top: 100px;">
                <h1 style="color: dodgerblue;">HIS医院信息系统</h1>
                <!-- 登录表单 -->
                <el-form ref="registerFormRef" :model="registerForm" :rules="registerRules">
                    <el-form-item label="账号" prop="username" style="width: 400px;">
                        <el-input v-model="registerForm.username" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password" style="width: 400px;">
                        <el-input type="password" v-model="registerForm.password" clearable></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">注册</el-button>
                        <el-button type="primary" @click="getBack">返回</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
export default {
    data() {
        return {
            registerForm: {
                username: "",
                password: ""
            },
            registerRules: {
                username: [
                    { required: true, message: "请输入账号", trigger: "blur" },
                    { min: 2, max: 7, message: "长度在1到7个字符", trigger: "blur" }
                ],
                password: [
                    { required: true, message: "请输入密码", trigger: "blur" },
                    { min: 5, max: 10, message: "长度在5到10个字符", trigger: "blur" }
                ],
            }
        };
    },
    methods: {
        onSubmit: function () {
            this.$refs.registerFormRef.validate(async valid => {
                if (!valid) return;
                //注册验证
                //参数：String username, String password
                await axios.get("http://127.0.0.1:8088/user/insert", { params: { username: this.registerForm.username, password: this.registerForm.password } }).then((res) => {
                    console.log(res.data.data)
                    if (res.data.code === 1) {
                        this.$message.success("注册成功")
                        //跳转到home界面
                        this.$router.push("/test")
                    }
                    else {
                        return this.$message.error("注册失败, " + res.data.msg)
                    }
                })
            })
        },
        //返回到登录界面
        getBack(){
            this.$router.push("/login")
        }
    },
}
</script>

<style scoped>
.register-page {
    height: 800px;
    width: 100%;
    background: url("../assets/图片2.png");
    background-repeat: no-repeat;
    position: fixed;
    background-size: cover;
}
</style>
